<template>
  <el-container class="home_container">
    <div class="home_Menu">
      <XnavCom :isCollapse="isCollapse">
        <template #unfoldlogo>
          <div style="padding: 10px;padding-bottom: 0;">
            ZeroMS
          </div>
        </template>
        <template #foldlogo>
          <div style="padding: 10px;padding-bottom: 0;">
            ZERO
          </div>
        </template>
      </XnavCom>
    </div>

    <el-container class="home-content">
      <el-header class="home-header" style="background-color: #fff;">
        <el-icon @click="isCollapse = !isCollapse" style="cursor: pointer;" color="#636D7E" :size="25">
          <Expand v-if="!isCollapse" />
          <Fold v-else />
        </el-icon>
        <XheaderNav />
      </el-header>
      <div class="home_divider"></div>
      <el-main style="padding: 0px;">
        <router-view class="body-content" />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: 'homeView',
  title: '主页',
  order: 2,
  haveThis: true
}
</script>
<script setup>
import XnavCom from '../components/XnavCom.vue'
import XheaderNav from '../components/XheaderNav.vue'
import { ref } from 'vue'
const isCollapse = ref(false)
const CloseMenu = () => {
  // 关闭菜单
  isCollapse.value = true
}
</script>

<style lang="scss" scoped>
.home_container {
  height: 100vh;
  width: 100vw;
  color: var(--text-color);
  background-color: var(--bg-color);
  display: flex;

  .home_Menu {
    // width: 200px;
    height: calc(100vh - 2px);
    border: var(--border-color) 1px solid;
    border-radius: 5px;
  }
}

.home_divider {
  height: 2px;
  background-color: var(--home-bg-color);
}

.home-content {
  flex: 1;
  border-left: 2px solid var(--home-bg-color);
  height: 100vh;

  .home-header {
    border-radius: 5px;
    color: var(--home-text-color);
    background-color: var(--bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .body-content {
    // 转化为非标准盒子
    box-sizing: border-box;
    border: 0;
    padding: 10px;
    height: 100%;
    background: var(--bg-color);
    border-radius: 4px;
  }
}

.mobile_nav_box {
  height: 100vh;
  width: 200vw;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  border-right: 1px solid var(--Home-birder-color);
  background-color: #0003;
  display: flex;
  transition: opacity 0.5s ease, transform 0.5s ease;

  &.slide-fade-enter-active,
  &.slide-fade-leave-active {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  &.slide-fade-enter-from,
  &.slide-fade-leave-to

  /* .slide-fade-leave-active in <2.1.8 */
    {
    opacity: 0;
    transform: translateX(-100%);
  }

  &.slide-fade-enter-to,
  &.slide-fade-leave-from

  /* .slide-fade-leave-active in <2.1.8 */
    {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
